<template>
  <el-table
      :data="tableData"
      style="width: 100%;text-align: center">
    <el-table-column
        label="卡号"
        width="100">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.cardID }}</span>
      </template>
    </el-table-column>
    <el-table-column
        label="类型"
        width="120">
      <template slot-scope="scope">
        <span style="margin-left: 10px" v-if="scope.row.cardType==='信用卡'"><el-tag color="#aff0af">{{
            scope.row.cardType
          }}</el-tag></span>
        <span style="margin-left: 10px" v-else><el-tag type="success" color="#152d64">{{ scope.row.cardType }}</el-tag></span>
      </template>
    </el-table-column>
    <el-table-column
        label="开户日期"
        width="130">
      <template slot-scope="scope">
        <div slot="reference" class="name-wrapper">
          <i class="el-icon-time"></i>
          <el-tag size="medium" style="margin-right: 2px">{{ scope.row.openDate }}</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column
        label="余额"
        width="150">
      <template slot-scope="scope">
        <span style="margin-right: 10px">{{ scope.row.balance }}</span>
        <el-tag type="success" style="margin-right: 10px">元</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        label="卡号密码"
        width="220">
      <template slot-scope="scope">
        <i class="el-icon-key"></i>
        <span style="margin-left: 10px">{{ scope.row.pass }}</span>
      </template>
    </el-table-column>
    <el-table-column
        label="用户"
        width="120">
      <template slot-scope="scope">

        <span style="margin-left: 10px"><el-tag>{{ scope.row.username }}</el-tag></span>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      tableData: [{
        "cardID": 3,
        "openDate": "2002-10-20",
        "openMoney": "123",
        "balance": "2000",
        "pass": "15654",
        "customerID": "iosadj",
        "cardType": ""
      },]
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getRequest("/api/card").then(resp => {
        if (resp) {
          if (resp.code == 1) {
            console.log(resp.data)
            this.tableData = resp.data;
          }
        }
      })
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(row.cardID);
      this.deleteRequest(`/api/card/${row.cardID}`).then(resp => {
        if (resp) {
          if (resp.code == 1) {
            this.$message.success("删除成功")
            this.initData();
          }
        }
      })
    }
  }
}
</script>
